<template>
	<view v-if="pageShow" class="container">
		<view class="header">
			<view class="header-status">
				<text>{{ orderObj.status === 0 ? '待付款' : orderObj.status === 1 ? '服务中···' : orderObj.status === 2 ? '待确认' :
					orderObj.status === 5 ? '订单已关闭' : '已完成' }}</text>
				<view v-if="orderObj.status === 0" class="header-count">
					<count-down :end-time="orderObj.createtime + 1800" :title-color="titleColor"></count-down>
				</view>
			</view>
		</view>
		<view class="float-content">
			<view class="content">
				<text class="status-name">{{ orderObj.status === 0 ? '待付款' : orderObj.status === 1 ? '服务中' : orderObj.status === 2
					? '待确认' : orderObj.status === 5 ? '交易失败' : '已完成' }}</text>
				<text class="status-des">{{ orderObj.status === 0 ? '您已经成功提交订单，订单未支付' : orderObj.status === 1 ? '该订单正在服务当中' :
					orderObj.status === 2 ? '请您验收服务' : orderObj.status === 5 ? '该订单已关闭' : '该订单已服务完成' }}</text>
			</view>
		</view>
		<view class="shop-detail">
			<view class="shop-img">
				<image :src="pic[0]" mode="aspectFill" class="img"></image>
			</view>
			<view class="shop-info">
				<text class="shop-name">{{ shopObj.name }}</text>
				<text class="shop-price">¥ {{ shopObj.price }}</text>
			</view>
		</view>
		<view class="true-price">
			<view class="old-price">
				<text>服务金额</text>
				<text>{{ shopObj.price == 0 ? '面议' : '¥' + shopObj.price }}</text>
			</view>
			<view class="new-price">
				<text>{{ orderObj.status === 0 || orderObj.status === 5 ? '未支付' : '实付款' }}</text>
				<text style="color: #FF6161;">¥ {{ orderObj.money }}</text>
			</view>
		</view>
		<view class="order-info">
			<view class="order-top">
				<text>订单信息</text>
				<view class="top-right" @click="goContact()">
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/personal/contact-service.png"
						class="contact-icon"></image>
					<text style="margin-left: 10rpx;">在线沟通</text>
				</view>
			</view>
			<view class="order-middle">
				<text style="color: #999;">服务方：</text>
				<text style="color: #333;">{{ serviceObj.name }}</text>
			</view>
			<view class="order-bottom">
				<text style="color: #999;">交易时间：</text>
				<text style="color: #333;">{{ orderObj.createtime_text }}</text>
			</view>
			<view class="order-bottom">
				<text style="color: #999;">订单号：</text>
				<view class="bottom-right">
					<text style="color: #333;margin-right: 10rpx;">{{ orderObj.order_no }}</text>
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/personal/copy-orderNo.png"
						class="copy-img" @click="copyOrder"></image>
				</view>
			</view>
		</view>
		<view v-if="orderObj.status === 0 || orderObj.status === 2 || orderObj.status === 5" class="bottom-btn">
			<view v-if="orderObj.status === 0 || orderObj.status === 5" class="btn-del" @click="delOrder(orderObj)">
				{{ orderObj.status === 0 ? "取消订单" : "删除订单" }}
			</view>
			<view class="flex-end">
				<view class="btn-detail" :class="orderObj.status === 0 ? 'now-buy' : 'go-buy'" @click="goBuyShop(orderObj)">
					{{ orderObj.status === 0 ? "立即支付" : orderObj.status === 2 ? "确认验收" : '重新购买' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../enterpriseServer/orderDetails/index"></script>

<style lang="scss" scoped>
@import 'index.scss';

/deep/ .u-count-down__text {
	color: #fff !important;
}
</style>